<template>
  <view class="container">
    <!-- @scrolltolower="scrolltolower" -->
    <view class="detail-head">
      <view class="head-top row">
        <view class="head-info">
          <view class="title">
            长期保
          </view>
          <view class="name">
            商务负责人：{{ detailInfo?.wesureInfo?.salesName ?? '暂无' }}
          </view>
        </view>
        <view :class="['head-close', detailInfo?.wesureInfo?.serviceState === 2 ? 'head-close-grey' : '']">
          {{ detailInfo?.wesureInfo?.serviceState === 1 ? '已交付' : detailInfo?.wesureInfo?.serviceState === 2 ? '已关闭' :
          '已开通' }}
        </view>
      </view>
      <view class="company-box">
        <view class="company-customer" @click="onGoContact">
          <view>
            关联客户：
          </view>
          <view class="title">
            {{ detailInfo?.wesureInfo?.companyName ?? '暂无' }}
            <image src="@/static/home/right-arrow.png" class="arrow-img" />
          </view>
        </view>
        <view class="company-contacts" @click="onGoCustomer">
          <view>客户联系人：</view>
          <view class="title">
            <view class="contacts-list">
              <view class="portrait-i" v-for="(item, index) in detailInfo.relevantContacts" :key="index">
                <default-portrait :name="item.customName" url="" width="48" height="48" />
              </view>
              <!-- <image
                                    class="contacts-i"
                                    src="../../../static/logo.png"
                                />
                                <image
                                    class="contacts-i"
                                    src="../../../static/logo.png"
                                /> -->
            </view>
            {{ detailInfo?.relevantContacts?.length }}人
            <image src="@/static/home/right-arrow.png" class="arrow-img" />
          </view>
        </view>
      </view>
    </view>
    <!-- 详细订单 -->
    <view class="record-list">
      <view class="record-i">
        <view class="i-info">
          <view class="info-row row">
            <view class="info-row-left"> 产品开通时间： </view>
            <text class="info-row-right">{{ detailInfo.productOpenTime?.productOpenTime }}</text>
          </view>
          <view class="info-row row">
            <view class="info-row-left"> 最后修改负责人时间： </view>
            <text class="info-row-right">{{ detailInfo.productOpenTime?.updateSalerTime }}</text>
          </view>
          <view class="info-row row">
            <view class="info-row-left"> 备注： </view>
            <text class="info-row-right">{{ detailInfo.productOpenTime?.remark ?? '——' }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 子弹发薪列表 -->
    <view>
      <view class="tab-radius">
        <tab-radius :list="['统计分析', '加减保', '充值记录']" :active="payIndex" @change="onPayTab" divided="100%" />
      </view>

      <!-- 销售记录 -->
      <view class="operate-box" v-if="payIndex === 0">
        <view class="operate">
          <view class="operate-screen row">
            <view class="row">
              <picker @change="onChangeCompany" :range="companyList.map(item => item.name)" class="month-select">
                <view class="screen-i row">
                  <view class="screen-text">{{ companyList[companyIndex].name }}</view>
                  <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                </view>
              </picker>
              <picker @change="onChangeMode" :range="modeList" class="month-select">
                <view class="screen-i screen-i-special row">
                  <view class="screen-text">{{ modeList[modeIndex] }}</view>
                  <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                </view>
              </picker>

              <picker @change="onChangeSend" :range="sendList.map(item => item.insurCompanyPlanName)"
                class="month-select">
                <view class="screen-i screen-i-special row">
                  <view class="screen-text">{{ sendList[sendIndex].insurCompanyPlanName }}</view>
                  <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                </view>
              </picker>

              <view class="screen-i-special row">
                <poput-time :list='selectTimeList' :default="timeIndex" @cancel="onCancelTime" />
              </view>
            </view>
          </view>
          <view>
            <!--                            <view class="box-list">-->
            <view class="box-list align-flex">
              <view class="block-box-i">
                <view class="title">总保费</view>
                <view class="num">¥{{ totalPremiumNum?.periodPremiumCount }}</view>
              </view>
              <view class="block-box-i block-box-i-left">
                <view class="title">返利</view>
                <view class="num">¥{{ totalPremiumNum?.rebateAmountCount }}</view>
              </view>
            </view>
            <view class="block-box-i block-box-i-active">
              <view class="title">业绩保费 <div class="title-child">*注：业绩保费=总保费-返利；返利：每月返利给符合条件的公司</div>
              </view>
              <view class="num">¥{{ totalPremiumNum?.achievementAmount }}</view>
            </view>
            <!--                                <view class="box-i box-i-active">-->
            <!--                                    <view class="title">-->
            <!--                                        总保费-->
            <!--                                    </view>-->
            <!--                                    <view class="num">-->
            <!--                                        <text class="company">￥</text>{{ totalPremiumNum?.periodPremiumCount }}-->
            <!--                                    </view>-->
            <!--                                </view>-->
            <!--                            </view>-->
          </view>
        </view>
        <!-- 在保人数 -->
        <view class="operate operate-top">
          <view class="block-box-i block-box-i-active">
            <view class="title">账户余额</view>
            <view class="num">¥{{ otherDataInfo?.periodInsurBalance }}</view>
          </view>
          <view class="box-list">
            <view class="box-i">
              <view class="title">
                在保总人数
              </view>
              <view class="num">
                <text class="company"></text>{{ otherDataInfo?.countAllEnsureStaff }}
              </view>
              <view class="compare">
                <view class="parallel align-flex">
                  <view class="contrast">比昨天</view>
                  <view
                    :class="['ratio', otherDataInfo?.countAllEnsureStaff - otherDataInfo?.countAllEnsureStaffYesterday >= 0 ? 'variety' : '']">
                    {{ otherDataInfo?.countAllEnsureStaff - otherDataInfo?.countAllEnsureStaffYesterday }}</view>
                </view>
              </view>
            </view>
            <view class="box-i">
              <view class="title">
                明日加保
              </view>
              <view class="num">
                <text class="company"></text>{{ otherDataInfo.tomorrowEnsure }}
              </view>
              <view class="compare">
                今日
                <text class="unit">{{ otherDataInfo.todayEnsure }}</text>
              </view>
            </view>
          </view>
          <view class="box-list box-list-bottom">
            <view class="box-i">
              <view class="title">
                今日减保
              </view>
              <view class="num">
                <text class="company"></text>{{ otherDataInfo.todayTerminalEnsure }}
              </view>
              <view class="compare">
                昨日
                <text class="unit">{{ otherDataInfo.yesterdayTerminalEnsure }}</text>
              </view>
            </view>
            <view class="box-i">
              <view class="title">
                今日报案
              </view>
              <view class="num">
                <text class="company"></text>{{ otherDataInfo.todayReport }}
              </view>
              <view class="align-flex">
                <view class="compare compare-active">
                  昨日
                  <text class="unit">{{ otherDataInfo.yesterdayReport }}</text>
                </view>
                <view class="compare">
                  全部
                  <text class="unit">{{ otherDataInfo.allReport }}</text>
                </view>
              </view>

            </view>
          </view>
        </view>

        <view class="operate operate-top ">
          <view class="operate-title row ">
            <view class="title">近七日加减保趋势</view>
            <view class="row">
              <view class="row " style="margin-right: 27rpx;">
                <view class="tips-block block-blue"></view>
                <view class="tips-name">
                  加保人数
                </view>
              </view>
              <view class="row">
                <view class="tips-block block-orange"></view>
                <view class="tips-name">
                  减保人数
                </view>
              </view>
            </view>
          </view>
          <view class="operate-chart">
            <qiun-data-charts canvas2d canvasId="operate-chart" class="qiun-data-charts" type="column" :opts="optsChart"
              :chartData="chartData" />
          </view>
        </view>

        <view class="operate operate-top">
          <view class="operate-title row">
            <view class="title">风险类别统计</view>
            <view></view>
          </view>
          <view class="statistics-box row">
            <tab-capsule :list="['按人数', '按金额']" :active="capsuleIndex" @change="onChangeCapsule" />
            <view class="operate-screen row">
              <picker @change="onMonthChange" mode="date" fields="month" class="month-select">
                <view class="screen-i">
                  <text>{{ chartTime }}</text>
                  <view class="triangle" />
                </view>
              </picker>
            </view>
          </view>
          <view class="operate-chart">
            <qiun-data-charts canvas2d canvasId="operate-ring" class="qiun-data-charts" type="ring" :opts="optsPie"
              :chartData="chartsDataPie1" />
          </view>
          <view class="operate-table">
            <view class="table-title row">
              <view class="title">风险类别</view>
              <view class="title" v-if="capsuleIndex === 0">人数</view>
              <view class="title" v-if="capsuleIndex === 1">保费</view>
              <view class="title">占比</view>
            </view>
            <view v-if="capsuleIndex === 0">
              <view class="table-cell row" v-for="(item, index) in piePeople" :key="index">
                <view class="cell cell-active">
                  <view class="colour-block" :style="{ background: item.color }"></view>
                  {{ item.title }}
                </view>
                <view class="cell">{{ item.people }}</view>
                <view class="cell">{{ item.total > 0 ? (item.people / item.total * 100).toFixed(2) + '%' : '暂无' }}</view>
              </view>
            </view>
            <view v-if="capsuleIndex === 1">
              <view class="table-cell row" v-for="(item, index) in pieMoney" :key="index">
                <view class="cell cell-active">
                  <view class="colour-block" :style="{ background: item.color }"></view>
                  {{ item.title }}
                </view>
                <view class="cell">¥{{ item.money }}</view>
                <view class="cell">{{ item.total > 0 ? (item.money / item.total * 100).toFixed(2) + '%' : '暂无' }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--      <noData v-if="Number(payIndex) === 1 || 2" :online="true"/>-->
    <div class="in-number" v-if="payIndex === 1">
      <div class="amount" v-if="preparationArr.length != 0">
        <view>
          <div class="amount-characters">
            在保人数
          </div>
          <div class="amount-quantity">
            {{ insuranceCount === 0 ? 0 : insuranceCount }}
          </div>
        </view>
        <div class="tabulation-tab">
          <div :class="['tag', selectIndex === index ? 'tag-active' : item === undefined ? 'item-null' : '']"
            v-for="(item, index) in preparationArr" :key="index" @click="onSelect(index)">
            <div>{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="content-list">
        <no-Data v-if="preparationArr.length == 0"></no-Data>
        <div class="amount-list" v-for="(item, index) in plusMinusArr" :key="index">
          <div class="dot-line">
            <div class="element1">
              <div class="child1"></div>
            </div>
            <div class="grey-line" v-if="index !== plusMinusArr.length - 1">
            </div>
          </div>
          <div class="line-box">
            <div class="amount-box">
              <div class="amount-time">
                {{ item?.operationTime }}
              </div>
            </div>
            <div class="content-box">
              <div class="content-quantum">
                <div class="quantum-title">{{ item.operationType == 0 ? '加保人数' : '减保人数' }}：</div>
                <div class="quantum-digit">
                  <img class="add-subtract" v-if="item.operationType == 0" src="@/static/longInsurance-detail/add.png"
                    alt="">
                  <img class="add-subtract" v-if="item.operationType == 1"
                    src="@/static/longInsurance-detail/reduce.png" alt="">
                  <!--                      <img src="./src/static/longInsurance-detail/add.png" alt="">-->
                  <!--                      <img src="./src/static/longInsurance-detail/reduce.png" alt="">-->
                  <span class="quantum-digit-child">{{ item?.total }}</span>
                </div>
              </div>
              <div class="effective-while">
                <div class="quantum-title">
                  生效时间：
                </div>
                <div class="quantum-digit">
                  {{ item?.insurStartDate }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <recharge :company="company" :payIndex="payIndex" />
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import tabCapsule from '@/components/tab-capsule/tab-capsule.vue'
import uchartsOpts from '@/utils/ucharts'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import recharge from '@/packageRemind/pages/longInsurance-detail/recharge/recharge.vue'
import { dateFormat } from '@/utils/util'
import defaultPortrait from '@/components/default-portrait/default-portrait.vue'
import {
    getLongInsureInfo,
    totalPremium,
    nearlySevenDays,
    insurancePiePeople,
    insurancePieMoney,
    insuranceCompanyList,
    insuranceSendList,
    insuranceOtherData,
    insurancePlusMinus,
    GetInsureDto, insurancePreparation
} from '@/api/signing'
const dealId = ref()
const payIndex = ref(0)
const companyId = ref()
const detailInfo = ref({} as GetInsureDto)
const totalPremiumNum = ref(0)
const companyList = ref([{ insurCompany: '', name: '全部保司' }])
const companyIndex = ref(0)
const sendList = ref([{ insurCompanyPlanCode: '', insurCompanyPlanName: '全部方案' }])
const sendIndex = ref(0)
const modeList = ref(['全部方式', '灵活保单', '月保单', '即时生效'])
const modeIndex = ref(0)
const selectTimeList = ref(['昨天', '今天', '本周', '本月', '上月'])
const timeIndex = ref(3)
const startTime = ref('')
const endTime = ref('')
const cstartTime = ref('')
const cendTime = ref('')
const customer = ref('long')
const chartData = ref({
    categories: [] as string[],
    series: [
        {
            name: '加保人数',
            data: [] as string[],
            color: '#3E5FF5'
        },
        {
            name: '减保人数',
            data: [] as string[],
            color: '#FF7642'
        }
    ]
})

const optsChart = ref({
    dataLabel: false,
    legend: {
        show: false,
        position: 'top',
        float: 'right',
        padding: 0,
        margin: 5,
        fontSize: 8
    },
    xAxis: {
        disableGrid: true,
        fontSize: 10

    },
    yAxis: {
        disabled: false,
        disableGrid: false,
        data: [
            {
                min: 0,
                axisLine: false
            }
        ]
    },
    extra: {
        column: {
            type: 'group',
            width: 5,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            seriesGap: 2
        }
    }
})
const chartTime = ref(dateFormat('YYYY-mm', new Date()))
const capsuleIndex = ref(0)
const piePeople = ref([] as any)
const pieMoney = ref([] as any)
const chartsDataPie1 = ref({
    series: [{
        data: []
    }]
})
const otherDataInfo = ref({} as any)
onLoad((options) => {
    console.log(options, 'options')
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    cstartTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    cendTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    companyId.value = options.id
    dealId.value = options.dealId
    const company = ref()
    company.value = options.id
    getTotalPremium()
    getNearlySevenDays()
    getInsurancePiePeople()
    getInsurancePieMoney()
    getInsuranceCompanyList()
    getInsuranceSendList()
    getInsuranceOtherData()
    Preparation()
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
onShow(async () => {
    await longInsureInfo()
    await PlusMinus()
})
// 去关联客户
const onGoCustomer = async () => {
    uni.navigateTo({
        url: '/packageRemind/pages/related-contacts/related-contacts?dealId=' + dealId.value + '&companyId=' + companyId.value
    })
}
// 选择时间回调
const onCancelTime = async (index: { index: number, time: undefined | string }) => {
    timeIndex.value = Number(index.index)
    console.log(index, 'index')
    startTime.value = index.time?.split(' 至 ')[0] as string
    endTime.value = index.time?.split(' 至 ')[1] as string
    cstartTime.value = index.startTime
    cendTime.value = index.endTime
    await getTotalPremium()
}
const getInsuranceSendList = async () => {
    const result = await insuranceSendList({
        companyId: companyId.value
    })
    sendList.value.push(...result)
    console.log(sendList.value, 'sendList')
}
const onChangeCompany = async (event: { detail: { value: string } }) => {
    console.log(event, 'event')
    companyIndex.value = Number(event.detail.value)
    getTotalPremium()
}
const onChangeSend = async (event: { detail: { value: string } }) => {
    console.log(event, 'event')
    sendIndex.value = Number(event.detail.value)
    getTotalPremium()
}
const getInsuranceOtherData = async () => {
    const result = await insuranceOtherData({
        companyId: companyId.value
    })
    otherDataInfo.value = result
    console.log(result, '加减保数据')
}
// onChangeMode
const onChangeMode = async (event: { detail: { value: string } }) => {
    console.log(event, 'event')
    modeIndex.value = Number(event.detail.value)
    getTotalPremium()
}
const getInsuranceCompanyList = async () => {
    const result = await insuranceCompanyList({
        companyId: companyId.value
    })
    companyList.value.push(...result)
    console.log(result, '保司列表')
}
const onMonthChange = (event: { detail: { value: string } }) => {
    console.log(event, 'event')
    chartTime.value = event.detail.value
    getInsurancePiePeople()
    getInsurancePieMoney()
}
const onChangeCapsule = async (event: number) => {
    capsuleIndex.value = event
    if (event === 0) {
        chartsDataPie1.value.series[0].data = piePeople.value.map((item) => {
            console.log(item, 'item')
            return {
                name: item.title,
                value: item.people,
                ...item
            }
        })
    } else {
        chartsDataPie1.value.series[0].data = pieMoney.value.map((item) => {
            return {
                name: item.title,
                value: item.money,
                ...item
            }
        })
    }
}
const getInsurancePiePeople = async () => {
    const result = await insurancePiePeople({
        companyId: companyId.value,
        queryMonth: chartTime.value
    })
    piePeople.value = result
    if (capsuleIndex.value === 0) {
        chartsDataPie1.value.series[0].data = piePeople.value.map((item) => {
            console.log(item, 'item')
            return {
                name: item.title,
                value: item.people,
                ...item
            }
        })
        console.log(chartsDataPie1.value, '人数饼图')
    }
}
const getInsurancePieMoney = async () => {
    const result = await insurancePieMoney({
        companyId: companyId.value,
        queryMonth: chartTime.value
    })
    pieMoney.value = result
    if (capsuleIndex.value === 1) {
        chartsDataPie1.value.series[0].data = pieMoney.value.map((item) => {
            return {
                name: item.title,
                value: item.money,
                ...item
            }
        })
    }
}
const getNearlySevenDays = async () => {
    const result = await nearlySevenDays({
        companyId: companyId.value
    })
    chartData.value.categories = result.date.map((item, index) => {
        return (item.split('-')[1] + '/' + item.split('-')[2])
    })
    chartData.value.series[0].data = result.add
    chartData.value.series[1].data = result.reduce
    // const addNum = result.add.sort((a, b) => {
    //     return b - a
    // })[0]
    // const reduceNum = result.reduce.sort((a, b) => {
    //     return b - a
    // })[0]
    // console.log(addNum, reduceNum, (Number(addNum) + (20 / Number(addNum) * 100).toFixed(0)), (20 / Number(reduceNum) * 100).toFixed(0), '123456979')
    // optsChart.value.yAxis.data[0].max = (addNum > reduceNum ? (Number(addNum) + (20 / Number(addNum) * 100).toFixed(0)) : (Number(reduceNum) + (20 / Number(reduceNum) * 100).toFixed(0)))

    console.log(chartData.value, 'chartData.value')
    console.log(result, '柱状图数据')
}
// // 去客户联系人
// const onGoContact = () => {
//     uni.navigateTo({
//         url: '/packageRemind/pages/customer-detail/index?id=' + companyId.value + '&customer=' + customer.value + '&dealId=' + dealId.value
//     })
// }
const getTotalPremium = async () => {
    // sendList
    const result = await totalPremium({
        companyId: companyId.value,
        insurCompany: companyIndex.value === 0 ? '' : companyList.value[companyIndex.value].insurCompany,
        insurCompanyPlanCode: sendIndex.value === 0 ? '' : sendList.value[sendIndex.value].insurCompanyPlanCode,
        insuranceMethod: modeIndex.value === 0 ? '' : (modeIndex.value - 1),
        startTime: timeIndex.value > 800 ? startTime.value : cstartTime.value,
        endTime: timeIndex.value > 800 ? endTime.value : cendTime.value
    })
    totalPremiumNum.value = result
    console.log(result, 'result')
}
const longInsureInfo = async () => {
    const result = await getLongInsureInfo({
        companyId: companyId.value,
        dealId: dealId.value
    })
    console.log(result, 'result')
    detailInfo.value = result
}
const optsPie = ref(uchartsOpts.optsRing)
// tab发薪胶囊回调
const onPayTab = (index: number) => {
    payIndex.value = index
}

const type = ref()
const preparationArr = ref([])
const Preparation = async function () {
    const result = await insurancePreparation({
        companyId: companyId.value
    })
    const resoutCopy = result.reverse().map((item:any, i:number) => {
        return {
            name: item.dictLabel,
            type: item.dictValue
        }
    })
    resoutCopy.map((item: any, index: number) => {
        if (resoutCopy.length === 1) {
            preparationArr.value.push(resoutCopy[0].name)
            type.value = item.type
            console.log(type, '111111111111111111111111111111111111111')
        } else {
            console.log(resoutCopy, '筛选接口type')
            if (item.type === null) {
                preparationArr.value.push(resoutCopy[0].name)
            } else {
                preparationArr.value[item.type - 2] = item.name
            }
        }
    })
    // preparationArr.value = preparationArr.value.filter(d => d)
    console.log(resoutCopy, preparationArr, '1111111111', preparationArr.value[0], '筛选接口')
}

const pageNum = ref(1)
const hasNextPage = ref(false)
const plusMinusArr = ref([] as any)
const insuranceCount = ref()
const PlusMinus = async function () {
    if (pageNum.value === 1) {
        plusMinusArr.value = ''
    }
    const result = await insurancePlusMinus({
        pageNum: pageNum.value,
        pageSize: 10,
        companyId: companyId.value,
        type: type.value ? type.value : selectIndex.value == 0 ? '' : selectIndex.value + 2
    })
    if (result.addAndSubtractRecord.hasNextPage === false) {
        hasNextPage.value = false
    } else {
        hasNextPage.value = true
    }
    insuranceCount.value = result.insuranceCount
    plusMinusArr.value = [...plusMinusArr.value, ...result.addAndSubtractRecord.list.map((item: any) => {
        item.operationTime = item.operationTime.substring(5)
        return item
    })]
    console.log(result.addAndSubtractRecord.list, insuranceCount.value, '这个结果是啥，看看22')
    console.log(result, '这个结果是啥，看看')
}

// 点击选择框和事件
const selectIndex = ref(0)
const onSelect = function (data: number) {
    console.log(data, 'data的值是啥')
    selectIndex.value = data
    pageNum.value = 1
    PlusMinus()
}

onReachBottom((item: any) => {
    console.log('到达底部了吗')
    if (payIndex.value === 1) {
        if (hasNextPage.value === true) {
            pageNum.value++
            PlusMinus()
        }
    } else if (payIndex.value === 2) {
        uni.$emit('onReachBottom3')
    }
})
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #fafafc;
  padding-bottom: 0;
}

.tab-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-radius {
  margin-top: 30rpx;
  padding: 0rpx 30rpx;
}

.scroll {
  height: 100vh;
}

.record-list {
  padding: 0 30rpx;
  margin-top: 34rpx;

  .record-i {
    padding: 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
  }

  .info-row {
    display: flex;
  }

  .info-row-left {
    color: $grey;
    font-size: $font-normal;
    margin-bottom: 17rpx;
    flex: 1;
  }

  .info-row-right {
    color: $black;
    font-size: $font-normal;
    margin-bottom: 17rpx;
  }
}

.operate-box {
  padding: 30rpx;
}

.operate {
  padding: 30rpx;
  background: #FFFFFF;
  border-radius: 16rpx;

  .screen-i {
    border-radius: 8rpx;
    border: 1rpx solid #DEE0E3;
    padding: 8rpx 10rpx;
    color: #565868;

    .screen-text {
      width: 100rpx;
      font-size: $font-base;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .screen-i-special {
    margin-left: 25rpx;
  }

  .drop-down {
    width: 22rpx;
    height: 20rpx;
  }

  .box-list {
    @include flex-between;
    flex-wrap: wrap;
    margin: 30rpx 0 30rpx 0;
  }

  .box-i {
    width: calc(100% / 2.4);
    background: #F4F4F7;
    padding: 23rpx 0 23rpx 30rpx;
    border-radius: 16rpx;
  }

  .compare {
    color: $grey;
    margin-top: 16rpx;

    .unit {
      color: $green;
    }
  }

  .compare-active {
    margin-right: 25rpx;
  }

  .box-i-active {
    flex: 1;
  }

  .title {
    color: #565868;
    font-weight: bold;
  }

  .num {
    color: $black;
    font-weight: bold;
    font-size: $font-large;
    margin-top: 10rpx;
  }

  .company {
    font-size: $font-small;
  }

  .statistics-box {
    margin-top: 30rpx;
  }
}

.operate-top {
  margin-top: 30rpx;

  .operate-title {
    title {
      color: $black;
      font-size: $font-normal;
    }
  }

  .operate-chart {
    margin-top: 52rpx;
    height: 400rpx;
  }

  .qiun-data-charts {
    height: 400rpx;
    width: 200rpx;
  }

  .operate-table {
    margin-top: 20rpx;

    .table-title {
      border: 16rpx 16rpx;
    }

    .title {
      width: calc(100% / 3);
      text-align: center;
      height: 88rpx;
      line-height: 88rpx;
      background: #F4F4F7;
    }

    .cell {
      width: calc(100% / 3);
      text-align: center;
      height: 88rpx;
      line-height: 88rpx;
      background: #FAFAFC;
      color: #565868;
    }

    .cell-active {
      display: flex;
      align-items: center;
    }

    .colour-block {
      background: #3E5FF5;
      border-radius: 4rpx;
      width: 16rpx;
      height: 16rpx;
      margin: 0 12rpx 0 30rpx;
    }
  }
}

.tips-block {
  width: 12rpx;
  height: 12rpx;
  border-radius: 6rpx;
  margin-right: 8rpx;

  .tips-name {
    color: #565868;
    font-size: 24rpx;
  }

}

.block-orange {
  background: #FF7642;
}

.block-blue {
  background-color: #3E5FF5;
}

.contacts-list {
  margin-right: 40rpx;
}

.portrait-i {
  margin-right: -20rpx;
}

.in-number {
  margin: 25rpx 30rpx 0 30rpx;
}

.amount {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .amount-characters {
    font-size: $font-normal;
    font-weight: 400;
    color: #9497B1;
    line-height: 34rpx;
  }

  .amount-quantity {
    font-size: 58rpx;
    font-weight: normal;
    color: $black;
    margin-top: 16rpx;
    font-weight: bold;
  }

  .tabulation-tab {
    display: flex;
    align-items: center;
    margin-top: 35rpx;

    .tag {
      text-align: center;
      min-width: 128rpx;
      font-size: 24rpx;
      font-weight: normal;
      color: #565868;
      padding: 8rpx 0 10rpx 0;
    }

    .tag-active {
      background: #EBEFFE;
      color: $blue;
    }
  }
}

.content-list {
  margin-top: 30rpx;
  background: #FFF;
  border-radius: 16rpx;
  padding: 24rpx 0;
  box-sizing: border-box;
}

.amount-list {
  padding: 0rpx 30rpx;
  display: flex;
}

.dot-line {
  flex-direction: row;
  justify-content: center;
}

.grey-line {
  width: 1rpx;
  height: 220rpx;
  border-left: 1rpx solid #DEE0E3;
  margin: 6rpx 0 6rpx 17rpx;
}

.element1 {
  width: 30rpx;
  height: 30rpx;
  background-color: #FFF;
  border-radius: 50%;
  border: 3rpx solid #DEE0E3;
  position: relative;
}

.child1 {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #DEE0E3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.amount-box {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 400;
  color: #202536;

  .amount-time {
    margin-bottom: 30rpx;
  }
}

.line-box {
  height: 220rpx;
  margin-left: 20rpx;
  box-sizing: border-box;

  //border-left: 1px solid #DEE0E3;
  .content-box {
    height: 147rpx;
    width: 580rpx;
    background: $white;
    border-radius: 16rpx;
    opacity: 1;
    padding: 30rpx 24rpx 24rpx;
    box-sizing: border-box;
  }
}

.content-quantum,
.effective-while {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.effective-while {
  margin-top: 24rpx;
}

.quantum-title {
  color: #9497B1;
  font-size: $font-normal;
}

.quantum-digit {
  display: flex;
  align-items: center;
  color: $black;
}

.box-list {
  @include flex-between;
  flex-wrap: wrap;
  margin: 30rpx 0 30rpx 0;
}

.block-box-i-active {
  width: 96%;
}

.add-subtract {
  width: 35rpx;
  height: 35rpx;
}

.quantum-digit-child {
  margin-left: 16rpx;
}

.parallel {
  margin-top: 16rpx;
  color: $grey;
  font-size: $font-base;

  .ratio {
    color: $green;
    margin-left: 8rpx;
  }

  .variety {
    color: #ff7642;
  }
}

.block-box-i .title {
  font-size: 24rpx;
}

.block-box-i-active .title-child {
  font-size: 20rpx;
  margin-top: 15rpx;
}

.operate .box-list-bottom {
  margin: 0;
}

.item-null {
  display: none;
  width: 0;
}
</style>
